<template>
<!-- 用户登录页面设计 -->
  <div class="home">
   <!-- 页面左右划分 -->
    <el-col :span="17" style="height:100%;">
      <div class="grid-content bg-purple" style="height:100%">
        <!-- 项目主题名称 -->
        <div style="width:100%;height:20%;text-align: center;">
          <span class="vintage1 container" style="font-size:50px;">高校团“萌”管理系统</span>
        </div>
        <!-- 走马登页面设计 -->
        <div style="width:100%;height:70%;">
          <el-carousel :interval="4000" type="card" height="400px" style="margin-left:30px;margin-top:60px">
            <el-carousel-item v-for="(img,index) in imgList" :key="index" >
              <img :src="img.url" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </el-col>
    <!-- 登录模块设计 -->
    <el-col :span="7" style="height:100%">
      <div class="grid-content bg-purple-light" style="height:100%">
        <div style="width:100%;height:25%;">

        </div>
        <div style="width:80%;" class="container">
          <el-tabs v-model="activeName">
            <el-tab-pane label="" name="ss"></el-tab-pane>
            <el-tab-pane label="" name="tr"></el-tab-pane>
            <el-tab-pane label="学生登录" name="first">
              <div style="width:100%">
                <!-- 登录表单 -->
                <el-form ref="form" :model="form" label-width="40px" style="margin-top:30px">
                  <el-form-item label="学号">
                    <el-input v-model="form.stuId" placeholder="请输入学号"></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="form.stuPassword" placeholder="请输入密码" type="password"></el-input>
                  </el-form-item>
                  <el-button style="width:110px;margin-left:40px" @click="StudentLogin()">登录</el-button>
                  <el-button style="width:120px;margin-left:40px">忘记密码</el-button>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管理员登录" name="second">
              <div style="width:100%">
                <!-- 登录表单 -->
                <el-form ref="form" :model="form" label-width="40px" style="margin-top:30px">
                  <el-form-item label="工号">
                    <el-input v-model="adminForm.adminId" placeholder="请输入管理员工号"></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="adminForm.adminPassword" placeholder="请输入密码" type="password"></el-input>
                  </el-form-item>
                  <el-button style="width:110px;margin-left:40px" @click="AdminLogin()">登录</el-button>
                  <el-button style="width:120px;margin-left:40px">注册账号</el-button>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div> 
      </div>
    </el-col>
  <router-view/>
  </div>
</template>


<style>

  .vintage1{
    background: #EEE url() repeat;
    text-shadow: 5px -5px black, 4px -4px white;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text ;
    background-clip: text;
  }
  .home{
    width: 100%;
    height: 100%;
    background-color: skyblue;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>


<script>
export default {
  data(){
    return{
      activeName: 'first',
      imgList:[
        {url:require("../images/1.jpg")},
        {url:require("../images/2.jpg")},
        {url:require("../images/3.jpg")},
        {url:require("../images/4.jpg")},
        {url:require("../images/5.jpg")}
      ],
      // 用户登录信息封装;
      form: {
        stuId:"",
        stuPassword:"",
      },
      adminForm:{
        adminId:"",
        adminPassword:""
      }
    }
  },
  methods:{
    StudentLogin(){
      if(this.form.stuId==""){
        //提示框
        layer.msg('请输入学号');
      }else if(this.form.stuPassword==""){
        layer.msg('请输入密码');
      }else{
        this.$axios.post("http://localhost:8081/user/login",this.form).then(res=>{
          console.log(res.data);
          this.$cookies.set('userLogin', this.form.stuId,"12h")  
          this.$router.push("/showIndex")
        })
      } 
    },
    AdminLogin(){
    if(this.adminForm.adminId==""){
        //提示框
        layer.msg('请输入工号');
      }else if(this.adminForm.adminPassword==""){
        layer.msg('请输入密码');
      }else{
        this.$axios.post("http://localhost:8081/user/login",this.adminForm).then(res=>{
          // console.log(res.data);
          // this.$cookies.set('userLogin', this.form.stuId,"12h")  
          // this.$router.push("/showIndex")
        })
      }
    }
  }
}
</script>